<template>
    <div id="Welcome">
        <el-row :gutter="20">
            <el-col :span="8">
                <div class="grid-content bg-purple pur1">
                    <div class="title">
                        <i></i>电梯项目
                    </div>

                    <div style="padding: 15px">
                        <el-row :gutter="20">
                            <el-col :span="12">
                                <div class="grid-content bg-purple pur2"></div>
                            </el-col>
                            <el-col :span="12">
                                <div class="grid-content bg-purple pur2"></div>
                            </el-col>

                        </el-row>
                        <el-row :gutter="20">
                            <el-col :span="12">
                                <div class="grid-content bg-purple pur2"></div>
                            </el-col>
                            <el-col :span="12">
                                <div class="grid-content bg-purple pur2"></div>
                            </el-col>

                        </el-row>
                    </div>


                </div>
            </el-col>
            <el-col :span="16">
                <div class="grid-content bg-purple pur1">
                    <div class="title">
                        <i></i>电梯数据
                    </div>

                    <el-row class="dtsj">
                        <el-col :span="4"><div class="grid-content bg-purple"></div></el-col>
                        <el-col :span="4"><div class="grid-content bg-purple"></div></el-col>
                        <el-col :span="4"><div class="grid-content bg-purple"></div></el-col>
                        <el-col :span="4"><div class="grid-content bg-purple"></div></el-col>
                        <el-col :span="4"><div class="grid-content bg-purple"></div></el-col>
                        <el-col :span="4"><div class="grid-content bg-purple"></div></el-col>
                    </el-row>
                </div>
            </el-col>
            <el-col :span="16" style="margin-top: 20px">
                <div class="grid-content bg-purple pur1">
                    <div class="title">
                        <i></i>事件记录
                    </div>
                    <div class="sjjl">
                        <el-table
                                :data="tableData"
                                style="width: 100%;"
                                :show-header="false"
                                >
                            <el-table-column
                                    label="日期"
                                    width="200">
                                <template slot-scope="scope">
                                    <i class="el-icon-time"></i>
                                    <span style="margin-left: 10px">{{ scope.row.date }}</span>
                                </template>
                            </el-table-column>
                            <el-table-column
                                    prop="name"
                                    label="姓名"
                                    width="180">
                            </el-table-column>
                            <el-table-column
                                    prop="address"
                                    label="地址">
                            </el-table-column>
                        </el-table>
                    </div>
                </div>
            </el-col>
        </el-row>
    </div>
</template>

<script>
    export default {
        data () {
            return {
                circleUrl: "https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png",
                squareUrl: "https://cube.elemecdn.com/9/c2/f0ee8a3c7c9638a54940382568c9dpng.png",
                sizeList: ["large", "medium", "small"],
                tableData: [{
                    date: '2016-05-02 15:35:32',
                    name: '王小虎',
                    address: '上海市普陀区金沙江路 1518 弄'
                }, {
                    date: '2016-05-02 15:35:32',
                    name: '王小虎',
                    address: '上海市普陀区金沙江路 1517 弄'
                }, {
                    date: '2016-05-02 15:35:32',
                    name: '王小虎',
                    address: '上海市普陀区金沙江路 1519 弄'
                }, {
                    date: '2016-05-02 15:35:32',
                    name: '王小虎',
                    address: '上海市普陀区金沙江路 1516 弄'
                },{
                    date: '2016-05-02 15:35:32',
                    name: '王小虎',
                    address: '上海市普陀区金沙江路 1518 弄'
                }, {
                    date: '2016-05-02 15:35:32',
                    name: '王小虎',
                    address: '上海市普陀区金沙江路 1517 弄'
                }, {
                    date: '2016-05-02 15:35:32',
                    name: '王小虎',
                    address: '上海市普陀区金沙江路 1519 弄'
                }, {
                    date: '2016-05-02 15:35:32',
                    name: '王小虎',
                    address: '上海市普陀区金沙江路 1516 弄'
                },{
                    date: '2016-05-02 15:35:32',
                    name: '王小虎',
                    address: '上海市普陀区金沙江路 1518 弄'
                }, {
                    date: '2016-05-02 15:35:32',
                    name: '王小虎',
                    address: '上海市普陀区金沙江路 1517 弄'
                }, {
                    date: '2016-05-02 15:35:32',
                    name: '王小虎',
                    address: '上海市普陀区金沙江路 1519 弄'
                }, {
                    date: '2016-05-02 15:35:32',
                    name: '王小虎',
                    address: '上海市普陀区金沙江路 1516 弄'
                }]
            }
        }
    }
</script>

<style scoped lang="less">
    .el-row {
        margin-bottom: 20px;
        &:last-child {
            margin-bottom: 0;
        }
    }
    .el-col {
        border-radius: 4px;
    }
    .bg-purple-dark {
        background: #99a9bf;
    }
    .pur1{
        background: rgb(21,44,75);
        .title{
            i{
                display: inline-block;
                width: 5px;
                height: 5px;
                background-color: #8ed9f8;
                vertical-align: middle;
                margin-right: 10px;
            }
            text-indent: 20px;
            line-height: 30px;
            color:#eee;
            border-bottom: 1px solid rgb(43,55,97);
        }
        .dtsj{
            padding: 15px;
            .el-col{
                height: 100px;
                border-radius: 0;
            }
            .el-col + .el-col{
                border-left: 1px solid rgb(53, 68, 120);
            }
        }

        .el-table{
            background-color:rgb(21,44,75);

        }
    }
    .pur2{
        background: rgb(43,55,97);
        height: 350px;
    }
    .bg-purple-light {
        background: #e5e9f2;
    }
    .grid-content {
        border-radius: 4px;
        min-height: 36px;
    }
    .row-bg {
        padding: 10px 0;
        background-color: #f9fafc;
    }

    .el-table {
        color: #dcdcdc !important;
    }

</style>
